<!-- 信息公告 -->

<template>
    <div class="announcement-page">
        <el-table
          :header-cell-style="tableHeaderColor"
          :data="tableData"
          :default-sort="{ prop: 'date', order: 'descending' }" 
          :cell-style="cellStyle"
          @row-click="rowClick"
          style="width: 100%"
        >
            <el-table-column label="序号" width="80" style="padding-left: 10px;" align="center">
                <template #default="scope">
                    <el-image
                      style="width: 20px; height: 20px"
                      :src="require(`@/assets/images/${scope.row.icon}`)"
                      fit="fill">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="公告名称" />
            <el-table-column prop="time" label="发布时间" sortable width="180" align="center" />
        </el-table>
    </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'

export default {
    setup() {
        const data = reactive({
            tableData: [
                {
                    icon: 'u19.png',
                    name: '【麻城市中心】麻城经济开发区谌家园小学建设项目招标预公告',
                    time: '2022-04-13',
                },
                {
                    icon: 'u19.png',
                    name: '【麻城市中心】麻城市农村公路管理局招标计划',
                    time: '2022-04-13',
                },
                {
                    icon: 'u19.png',
                    name: '【麻城市中心】麻城经济开发区谌家园小学及附属幼儿园建设项目招标预公告',
                    time: '2022-04-13',
                },
                {
                    icon: 'u19.png',
                    name: '【汉川市中心】汉川电厂四期扩建工程电力和水管网线路迁改建设工程',
                    time: '2022-04-13',
                },
                {
                    icon: 'u19.png',
                    name: '【红安县中心】红安县2023年度小型水库安全监测项目设计采购施工总承包(EPC)',
                    time: '2022-04-13',
                },
                {
                    icon: 'u19.png',
                    name: '海头镇宅基村士地发包项目',
                    time: '2022-04-13',
                },
                {
                    icon: 'u19.png',
                    name: '先锋创业大楼（515-1室） 60m²',
                    time: '2022-04-13',
                },
                {
                    icon: 'u19.png',
                    name: '烟台市福山区人民政府清洋街道办車处2023年04（至）05月政府采购意向',
                    time: '2022-04-13',
                },
                {
                    icon: 'u19.png',
                    name: '同江市实验幼儿园2023年05月政府采购意向',
                    time: '2022-04-13',
                },
                {
                    icon: 'u19.png',
                    name: '侯马市第二中学校2023年4月至12月政府采购意向-城乡义务教育补助省级配套经费',
                    time: '2022-04-13',
                },
                {
                    icon: 'u19.png',
                    name: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目',
                    time: '2022-04-13',
                },
                {
                    icon: 'u19.png',
                    name: '侯马市第二中学校2023年4月至11月政府采购意向-城乡义务教育补助经费中央资金',
                    time: '2022-04-13',
                },
                {
                    icon: 'u19.png',
                    name: '太原市迎泽区卫生局卫生监香所2023年4月至12月政府采购意向-公用经费项目',
                    time: '2022-04-13',
                },
                {
                    icon: 'u19.png',
                    name: '侯马市第二中学校2023年4月至8月政府采购意向-城乡义务教育补助经费中央资金',
                    time: '2022-04-13',
                },
                {
                    icon: 'u19.png',
                    name: '【次氣酸钠贮存罐修理】采购公告 附件',
                    time: '2022-04-13',
                }
            ]
        })
        const router = useRouter()
        // 修改表头属性
        function tableHeaderColor() {
            return {
                background: '#F7FDFD',
                color: '#333'
            }
        }
        // 调整行高
        function cellStyle() {
            return {
                padding: '5px 0'
            }
        }
        // 点击某一行
        function rowClick(row,column,event) {
            console.log(row,column,event)
            router.push({
                name: 'Details'
            })
        }
        return {
            ...toRefs(data),
            tableHeaderColor,
            cellStyle,
            rowClick
        }
    }
}
</script>

<style scoped>
.announcement-page {
    height: calc(100% - 60px) ;
    padding: 20px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 10px;
}
</style>